<template>
	<view class="header-nav">
					<view class="uni-padding-wrap uni-common-mt">
						<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" class="header" />
					</view>
					
					<view class="content">
						<view v-if="current === 0" class="father" >	
						
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 100vh;">
							<view class="son"   v-for="item in orderList" :key=item.id>
								<!-- 头部 -->
								
									<view class="son-header" @click="goOrderDetail(item)">
										<span style="margin-left: 10px; font-size: 23px;font-weight: bold;">{{item.name}}<uni-icons type="forward" size="20"></uni-icons>
										</span>
										<span style="margin-left: 180px;">{{item.status}}</span>
									</view>
								
								
								<view class="son-bottom">
									<view style="display: flex;">
										<cover-image class="controls-play" :src='item.cover'></cover-image>
										<span style="margin-top: 50px; margin-right: 70px;">{{item.comment}}</span>
										<span style="margin-top: 50px;">实付:￥{{item.actual}}</span>
									</view>
									
									<view style="margin-left: 260px; " @click="withDraw(item.orderNo)"  v-if="item.status !== '已退款' && item.status !== '未支付' ">
									申请退款
									</view>
									<view style="margin-left: 300px; ;" @click="pay(item.orderNo)"  v-if="item.status == '未支付' ">
									去付款
									</view>
								</view>
								
							</view>
						</scroll-view>
							
						</view>
						<view v-if="current === 1">
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 100vh;">
								<view class="son"   v-for="item in orderList" :key=item.id>
									<!-- 头部 -->
									
										<view class="son-header"  @click="goOrderDetail(item)">
											<span style="margin-left: 10px; font-size: 23px;font-weight: bold;">{{item.name}}<uni-icons type="forward" size="20"></uni-icons>
											</span>
											<span style="margin-left: 200px;">{{item.status}}</span>
										</view>
									
									
									<view class="son-bottom">
										<view style="display: flex;">
											<cover-image class="controls-play" :src='item.cover'></cover-image>
											<span style="margin-top: 50px; margin-right: 70px;">{{item.comment}}</span>
											<span style="margin-top: 50px;">实付:￥{{item.actual}}</span>
										</view>
										
									<view style="margin-left: 260px; " @click="withDraw(item.orderNo)"  v-if="item.status !== '已退款' && item.status !== '未支付' ">
									申请退款
									</view>
									<view style="margin-left: 300px; ;" @click="pay(item.orderNo)"  v-if="item.status == '未支付' ">
									去付款
									</view>
									</view>
									
								</view>
							</scroll-view>
						</view>
						<view v-if="current === 2">
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 100vh;">
								<view class="son"   v-for="item in orderList" :key=item.id>
									<!-- 头部 -->
									
										<view class="son-header"  @click="goOrderDetail(item)">
											<span style="margin-left: 10px; font-size: 23px;font-weight: bold;">{{item.name}}<uni-icons type="forward" size="20"></uni-icons>
											</span>
											<span style="margin-left: 200px;">{{item.status}}</span>
										</view>
									
									
									<view class="son-bottom">
										<view style="display: flex;">
											<cover-image class="controls-play" :src='item.cover'></cover-image>
											<span style="margin-top: 50px; margin-right: 70px;">{{item.comment}}</span>
											<span style="margin-top: 50px;">实付:￥{{item.actual}}</span>
										</view>
										
										
										<view style="margin-left: 275px; " @click="deleteOrder(item.orderNo)">
											<uni-icons type="trash-filled" size="25"></uni-icons>删除订单
											
										</view>
										
										<view style="margin-left: 180px; position: relative; bottom: 25px;" @click="goEvaluate(item.orderNo,item.businessId)" >
											<uni-icons type="compose" size="25"></uni-icons>去评价
											
										</view>
									</view>
									
								
								</view>
							</scroll-view>
						</view>
						<view v-if="current === 3">
								<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 100vh;">
									<view class="son"   v-for="item in orderList" :key=item.id>
										<!-- 头部 -->
										
											<view class="son-header"  @click="goOrderDetail(item)">
												<span style="margin-left: 10px; font-size: 23px;font-weight: bold;">{{item.name}}
												<uni-icons type="forward" size="20"></uni-icons>
												</span>
												<span style="margin-left: 200px;">{{item.status}}</span>
											</view>
									
										
										<view class="son-bottom">
											<view style="display: flex;">
												<cover-image class="controls-play" :src='item.cover'></cover-image>
												<span style="margin-top: 50px; margin-right: 70px;">{{item.comment}}</span>
												<span style="margin-top: 50px;">实付:￥{{item.actual}}</span>
											</view>
											
											<view style="margin-left: 275px; " @click="deleteOrder(item.orderNo)">
												<uni-icons type="trash-filled" size="25"></uni-icons>删除订单
											</view>
										</view>
										
									
										
									</view>
								</scroll-view>
						</view>
					</view>
					
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				items: ['全部', '进行中', '待评价','退款'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				orderList:[],
				user:uni.getStorageSync('xm-user'),
				orderObj:{},
				
				
			}
		},
		onLoad(){
			this.$request.get('/orders/selectAll/'+this.user.id).then(res => {
				this.orderList = res.data	
			
			})
		},
		onShow(){
			this.newLoad()
		},
		methods: {
			pay(orderNo){
			
				
				this.$request.get('/orders/pay/'+orderNo).then(res => {
					
					
					// 由于测试阶段采用沙箱支付，下面两行代码需要配置！！！！！！！！！！重点！！！
					var EnvUtils = plus.android.importClass('com.alipay.sdk.app.EnvUtils');
					EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
					
					if (res.code == 200) {
					        orderData.orderNo = res.orderNo
					        let orderString = res.orderString  //获取后端传过来字符串
					        let _this = this
					 
					        //主要看这块
					        uni.requestPayment({
					            "provider": "alipay",  //这个好像是选择第三方的类型，这里写支付宝的
					            "orderInfo": orderString,   //字符串传进来
					            success: function(res) {
					                var rawdata = JSON.parse(res.rawdata);
					                console.log("支付成功");
					                // 支付成功则跳转至评价页
					               uni.navigateBack()
					            },
					            fail: function(err) {
					                console.log('支付失败:' + JSON.stringify(err));
					                //这里进行取消支付的判断，如果是用户取消订单则跳转至未支付页面，如果是订单问题，根据订单检验规则给用户相应的反馈
					                //取消支付则跳转至详情页
									
					                // uni.navigateTo({
					                //     url:'/pages/subpages/orderDetail/orderDetail?orderNo='+ orderData.orderNo
					                // })
									
									uni.showToast({
									  icon: 'error',
									  title: "支付失败~"
									})
									uni.navigateBack()
					            }
					        })
					    }
					
		
				
				})
			},
			goEvaluate(orderNo,businessId){
				uni.navigateTo({
					url:"/pages/evaluate/evaluate?orderNo="+orderNo+"&businessId="+businessId
				})
			},
			goOrderDetail(orderObj){
				uni.navigateTo({
									url:"/pages/orderDetail/orderDetail?orderObj="+JSON.stringify(orderObj)
								})
			},
			withDraw(orderNo){
				this.orderObj.orderNo = orderNo
				this.orderObj.status = '申请退款'
				this.orderObj.isFinished = '5'
				this.$request.post('/orders/updateStatusByOrderNo/',this.orderObj).then(res =>{
					if(res.code == '200'){
						uni.showToast({
							title:'待商家审核通过~',
							icon:'success'
						})
						this.newLoad()
					}
				})
			
				
			},
			deleteOrder(orderNo){
				// 删除订单 然后刷新页面
				this.$request.get('/orders/deleteByorderNo/'+orderNo).then(res => {
					uni.showToast({
						icon:"success",
						title:"删除成功~"
					})
					this.newLoad()
				})
			},
			newLoad(){
				if(this.current == 0){
					// 全部
					this.$request.get('/orders/selectAll/'+this.user.id).then(res => {
						this.orderList = res.data	
					})
				}else if(this.current == 1){
					// 进行中
					this.$request.get('/orders/selectById/'+this.user.id+'/1').then(res => {
												this.orderList = res.data	
					})
				}else if(this.current == 2){
					// 待评价
					this.$request.get('/orders/selectById/'+this.user.id+'/2').then(res => {
												this.orderList = res.data	
					})
				}else {
					// 退款
					this.$request.get('/orders/selectById/'+this.user.id+'/3').then(res => {
												this.orderList = res.data	
					})
				}
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.newLoad()
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {
					this.activeColor = e.detail.value
				}
			},
		}
	}
</script>

<style lang="scss">
	.controls-play {
		width: 80px;
		height: 80px;
		margin-right: 20px;
		margin-top: 5px;
		margin-left: 10px;
	}
	.header-nav {
		position: relative;
		top:-5vh;
		background-color: white;
	}
	.header {
		background-color: yellow;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
		
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	
	}
	.content .father {
		width: 100vw;
			height: 100vh;
			background-color: transparent;
			
	}
	
	.son {
		background-color: white;
		color: black;
		width: 370px;
		height: 150px;
		margin: 0px 10px;
		border-radius: 5px;
		box-shadow: 0px 0px 10px green;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-top: 20px;
		
	}
	.content .son .son-header {
		background-color: white;
	}
	.content-text {
		font-size: 14px;
		color: #666;
		background-color: gray;
		
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
</style>


